<!--
 * @Author: your name
 * @Date: 2021-09-06 15:45:07
 * @LastEditTime: 2021-09-09 15:43:48
 * @LastEditors: Please set LastEditors
 * @Description: In User Settings Edit
 * @FilePath: \ej-webui\src\pages\order\index.vue
-->
<template>
  <div>
    <el-tabs v-model="activeName" @tab-click="handleClick">
      <el-tab-pane label="所有订单" name="first">
        <el-table :data="tableData.list" stripe style="width: 100%">
          <el-table-column prop="id" label="订单编号" width="120">
          </el-table-column>
          <el-table-column prop="orderTime" label="下单时间" width="180">
          </el-table-column>
          <el-table-column prop="total" label="总价">
            <template v-slot="scope">
              ￥<span style="color: red">{{ scope.row.total }}</span
              >元
            </template>
          </el-table-column>
          <el-table-column prop="status" label="状态">
            <template v-slot="scope">
              <el-tag type="success" v-if="scope.row.status == '待派单'"
                >待派单</el-tag
              >
              <el-tag type="info" v-else-if="scope.row.status == '待服务'"
                >待服务</el-tag
              >
              <el-tag type="warning" v-else>待接单</el-tag>
            </template>
          </el-table-column>
          <el-table-column prop="customerId" label="顾客ID"> </el-table-column>
          <el-table-column prop="employeeId" label="员工ID">
            <template v-slot="scope">
              <div v-if="scope.row.employeeId">{{ scope.row.employeeId }}</div>
              <div v-else>--</div>
            </template>
          </el-table-column>
          <el-table-column label="操作">
            <template v-slot="scope">
              <div>
                <el-link :underline="false" @click="juspDetails(scope.row.id)"
                  >详情</el-link
                >
                <el-link
                  :underline="false"
                  type="success"
                  style="margin-left: 5px"
                  v-if="scope.row.status == '待派单'"
                  @click="sendData(scope.row.id)"
                  >派单</el-link
                >
                <el-link
                  :underline="false"
                  v-else-if="scope.row.status == '待服务'"
                ></el-link>
                <el-link
                  :underline="false"
                  type="warning"
                  style="margin-left: 5px"
                  v-else
                  @click="cancelOrder(scope.row.id)"
                  >取消派单</el-link
                >
              </div>
            </template>
          </el-table-column>
        </el-table>
        <el-pagination
          @size-change="sizeChangeHandler"
          @current-change="pageChangeHandler"
          :page-sizes="[10, 15, 20]"
          :page-size="100"
          layout="total, sizes, prev, pager, next, jumper"
          :total="this.tableData.total"
          class="block"
          style="float: right; margin-top: 10px"
        >
        </el-pagination>
      </el-tab-pane>
      <el-tab-pane label="待支付" name="second">
        <el-table :data="tableData.list" stripe style="width: 100%">
          <el-table-column prop="id" label="订单编号" width="120">
          </el-table-column>
          <el-table-column prop="orderTime" label="下单时间" width="180">
          </el-table-column>
          <el-table-column prop="total" label="总价">
            <template v-slot="scope">
              ￥<span style="color: red">{{ scope.row.total }}</span
              >元
            </template>
          </el-table-column>
          <el-table-column prop="status" label="状态">
            <template v-slot="scope">
              <el-tag type="success" v-if="scope.row.status == '待派单'"
                >待派单</el-tag
              >
              <el-tag type="info" v-else-if="scope.row.status == '待服务'"
                >待服务</el-tag
              >
              <el-tag type="warning" v-else>待接单</el-tag>
            </template>
          </el-table-column>
          <el-table-column prop="customerId" label="顾客ID"> </el-table-column>
          <el-table-column label="操作">
            <template v-slot="scope">
              <div>
                <el-link :underline="false" @click="juspDetails(scope.row.id)"
                  >详情</el-link
                >
                <el-link
                  :underline="false"
                  type="success"
                  style="margin-left: 5px"
                  v-if="scope.row.status == '待派单'"
                  @click="sendData(scope.row.id)"
                  >派单</el-link
                >
                <el-link
                  :underline="false"
                  v-else-if="scope.row.status == '待服务'"
                ></el-link>
                <el-link
                  :underline="false"
                  type="warning"
                  style="margin-left: 5px"
                  v-else
                  @click="cancelOrder(scope.row.id)"
                  >取消派单</el-link
                >
              </div>
            </template>
          </el-table-column>
        </el-table>
        <el-pagination
          @size-change="sizeChangeHandler"
          @current-change="pageChangeHandler"
          :page-sizes="[10, 15, 20]"
          :page-size="100"
          layout="total, sizes, prev, pager, next, jumper"
          :total="this.tableData.total"
          class="block"
          style="float: right; margin-top: 10px"
        >
        </el-pagination>
      </el-tab-pane>
      <el-tab-pane label="待派单" name="third">
        <el-table :data="tableData.list" stripe style="width: 100%">
          <el-table-column prop="id" label="订单编号" width="120">
          </el-table-column>
          <el-table-column prop="orderTime" label="下单时间" width="180">
          </el-table-column>
          <el-table-column prop="total" label="总价">
            <template v-slot="scope">
              ￥<span style="color: red">{{ scope.row.total }}</span
              >元
            </template>
          </el-table-column>
          <el-table-column prop="status" label="状态">
            <template v-slot="scope">
              <el-tag type="success" v-if="scope.row.status == '待派单'"
                >待派单</el-tag
              >
              <el-tag type="info" v-else-if="scope.row.status == '待服务'"
                >待服务</el-tag
              >
              <el-tag type="warning" v-else>待接单</el-tag>
            </template>
          </el-table-column>
          <el-table-column prop="customerId" label="顾客ID"> </el-table-column>
          <el-table-column label="操作">
            <template v-slot="scope">
              <div>
                <el-link :underline="false" @click="juspDetails(scope.row.id)"
                  >详情</el-link
                >
                <el-link
                  :underline="false"
                  type="success"
                  style="margin-left: 5px"
                  v-if="scope.row.status == '待派单'"
                  @click="sendData(scope.row.id)"
                  >派单</el-link
                >
                <el-link
                  :underline="false"
                  v-else-if="scope.row.status == '待服务'"
                ></el-link>
                <el-link
                  :underline="false"
                  type="warning"
                  style="margin-left: 5px"
                  v-else
                  @click="cancelOrder(scope.row.id)"
                  >取消派单</el-link
                >
              </div>
            </template>
          </el-table-column>
        </el-table>
        <el-pagination
          @size-change="sizeChangeHandler"
          @current-change="pageChangeHandler"
          :page-sizes="[10, 15, 20]"
          :page-size="100"
          layout="total, sizes, prev, pager, next, jumper"
          :total="this.tableData.total"
          class="block"
          style="float: right; margin-top: 10px"
        >
        </el-pagination>
      </el-tab-pane>
      <el-tab-pane label="待接单" name="fourth">
                <el-table :data="tableData.list" stripe style="width: 100%">
          <el-table-column prop="id" label="订单编号" width="120">
          </el-table-column>
          <el-table-column prop="orderTime" label="下单时间" width="180">
          </el-table-column>
          <el-table-column prop="total" label="总价">
            <template v-slot="scope">
              ￥<span style="color: red">{{ scope.row.total }}</span
              >元
            </template>
          </el-table-column>
          <el-table-column prop="status" label="状态">
            <template v-slot="scope">
              <el-tag type="success" v-if="scope.row.status == '待派单'"
                >待派单</el-tag
              >
              <el-tag type="info" v-else-if="scope.row.status == '待服务'"
                >待服务</el-tag
              >
              <el-tag type="warning" v-else>待接单</el-tag>
            </template>
          </el-table-column>
          <el-table-column prop="customerId" label="顾客ID"> </el-table-column>
          <el-table-column prop="employeeId" label="员工ID">
            <template v-slot="scope">
              <div v-if="scope.row.employeeId">{{ scope.row.employeeId }}</div>
              <div v-else>--</div>
            </template>
          </el-table-column>
          <el-table-column label="操作">
            <template v-slot="scope">
              <div>
                <el-link :underline="false" @click="juspDetails(scope.row.id)"
                  >详情</el-link
                >
                <el-link
                  :underline="false"
                  type="success"
                  style="margin-left: 5px"
                  v-if="scope.row.status == '待派单'"
                  @click="sendData(scope.row.id)"
                  >派单</el-link
                >
                <el-link
                  :underline="false"
                  v-else-if="scope.row.status == '待服务'"
                ></el-link>
                <el-link
                  :underline="false"
                  type="warning"
                  style="margin-left: 5px"
                  v-else
                  @click="cancelOrder(scope.row.id)"
                  >取消派单</el-link
                >
              </div>
            </template>
          </el-table-column>
        </el-table>
        <el-pagination
          @size-change="sizeChangeHandler"
          @current-change="pageChangeHandler"
          :page-sizes="[10, 15, 20]"
          :page-size="100"
          layout="total, sizes, prev, pager, next, jumper"
          :total="this.tableData.total"
          class="block"
          style="float: right; margin-top: 10px"
        >
        </el-pagination>
      </el-tab-pane>
      <el-tab-pane label="待服务" name="fifth">        <el-table :data="tableData.list" stripe style="width: 100%">
          <el-table-column prop="id" label="订单编号" width="120">
          </el-table-column>
          <el-table-column prop="orderTime" label="下单时间" width="180">
          </el-table-column>
          <el-table-column prop="total" label="总价">
            <template v-slot="scope">
              ￥<span style="color: red">{{ scope.row.total }}</span
              >元
            </template>
          </el-table-column>
          <el-table-column prop="status" label="状态">
            <template v-slot="scope">
              <el-tag type="success" v-if="scope.row.status == '待派单'"
                >待派单</el-tag
              >
              <el-tag type="info" v-else-if="scope.row.status == '待服务'"
                >待服务</el-tag
              >
              <el-tag type="warning" v-else>待接单</el-tag>
            </template>
          </el-table-column>
          <el-table-column prop="customerId" label="顾客ID"> </el-table-column>
          <el-table-column prop="employeeId" label="员工ID">
            <template v-slot="scope">
              <div v-if="scope.row.employeeId">{{ scope.row.employeeId }}</div>
              <div v-else>--</div>
            </template>
          </el-table-column>
          <el-table-column label="操作">
            <template v-slot="scope">
              <div>
                <el-link :underline="false" @click="juspDetails(scope.row.id)"
                  >详情</el-link
                >
                <el-link
                  :underline="false"
                  type="success"
                  style="margin-left: 5px"
                  v-if="scope.row.status == '待派单'"
                  @click="sendData(scope.row.id)"
                  >派单</el-link
                >
                <el-link
                  :underline="false"
                  v-else-if="scope.row.status == '待服务'"
                ></el-link>
                <el-link
                  :underline="false"
                  type="warning"
                  style="margin-left: 5px"
                  v-else
                  @click="cancelOrder(scope.row.id)"
                  >取消派单</el-link
                >
              </div>
            </template>
          </el-table-column>
        </el-table>
        <el-pagination
          @size-change="sizeChangeHandler"
          @current-change="pageChangeHandler"
          :page-sizes="[10, 15, 20]"
          :page-size="100"
          layout="total, sizes, prev, pager, next, jumper"
          :total="this.tableData.total"
          class="block"
          style="float: right; margin-top: 10px"
        >
        </el-pagination></el-tab-pane>
      <el-tab-pane label="待确认" name="sixthly">        <el-table :data="tableData.list" stripe style="width: 100%">
          <el-table-column prop="id" label="订单编号" width="120">
          </el-table-column>
          <el-table-column prop="orderTime" label="下单时间" width="180">
          </el-table-column>
          <el-table-column prop="total" label="总价">
            <template v-slot="scope">
              ￥<span style="color: red">{{ scope.row.total }}</span
              >元
            </template>
          </el-table-column>
          <el-table-column prop="status" label="状态">
            <template v-slot="scope">
              <el-tag type="success" v-if="scope.row.status == '待派单'"
                >待派单</el-tag
              >
              <el-tag type="info" v-else-if="scope.row.status == '待服务'"
                >待服务</el-tag
              >
              <el-tag type="warning" v-else>待接单</el-tag>
            </template>
          </el-table-column>
          <el-table-column prop="customerId" label="顾客ID"> </el-table-column>
          <el-table-column prop="employeeId" label="员工ID">
            <template v-slot="scope">
              <div v-if="scope.row.employeeId">{{ scope.row.employeeId }}</div>
              <div v-else>--</div>
            </template>
          </el-table-column>
          <el-table-column label="操作">
            <template v-slot="scope">
              <div>
                <el-link :underline="false" @click="juspDetails(scope.row.id)"
                  >详情</el-link
                >
                <el-link
                  :underline="false"
                  type="success"
                  style="margin-left: 5px"
                  v-if="scope.row.status == '待派单'"
                  @click="sendData(scope.row.id)"
                  >派单</el-link
                >
                <el-link
                  :underline="false"
                  v-else-if="scope.row.status == '待服务'"
                ></el-link>
                <el-link
                  :underline="false"
                  type="warning"
                  style="margin-left: 5px"
                  v-else
                  @click="cancelOrder(scope.row.id)"
                  >取消派单</el-link
                >
              </div>
            </template>
          </el-table-column>
        </el-table>
        <el-pagination
          @size-change="sizeChangeHandler"
          @current-change="pageChangeHandler"
          :page-sizes="[10, 15, 20]"
          :page-size="100"
          layout="total, sizes, prev, pager, next, jumper"
          :total="this.tableData.total"
          class="block"
          style="float: right; margin-top: 10px"
        >
        </el-pagination></el-tab-pane>
      <el-tab-pane label="已完成" name="seventh">        <el-table :data="tableData.list" stripe style="width: 100%">
          <el-table-column prop="id" label="订单编号" width="120">
          </el-table-column>
          <el-table-column prop="orderTime" label="下单时间" width="180">
          </el-table-column>
          <el-table-column prop="total" label="总价">
            <template v-slot="scope">
              ￥<span style="color: red">{{ scope.row.total }}</span
              >元
            </template>
          </el-table-column>
          <el-table-column prop="status" label="状态">
            <template v-slot="scope">
              <el-tag type="primary" v-if="scope.row.status == '已完成'"
                >已完成</el-tag
              >
            </template>
          </el-table-column>
          <el-table-column prop="customerId" label="顾客ID"> </el-table-column>
          <el-table-column prop="employeeId" label="员工ID">
            <template v-slot="scope">
              <div v-if="scope.row.employeeId">{{ scope.row.employeeId }}</div>
              <div v-else>--</div>
            </template>
          </el-table-column>
          <el-table-column label="操作">
            <template v-slot="scope">
              <div>
                <el-link :underline="false" @click="juspDetails(scope.row.id)"
                  >详情</el-link
                >
              </div>
            </template>
          </el-table-column>
        </el-table>
        <el-pagination
          @size-change="sizeChangeHandler"
          @current-change="pageChangeHandler"
          :page-sizes="[10, 15, 20]"
          :page-size="100"
          layout="total, sizes, prev, pager, next, jumper"
          :total="this.tableData.total"
          class="block"
          style="float: right; margin-top: 10px"
        >
        </el-pagination></el-tab-pane>
    </el-tabs>
    <!-- 派单模态框 -->
    <el-dialog
      title="提示"
      :visible.sync="dialogVisible"
      width="30%"
      :data="employees"
    >
      <el-radio-group v-model="total">
        <el-radio
          v-for="e in employees"
          :key="e.id"
          :label="e.id"
          @change="sendData2(e.id)"
          >{{ e.username }}</el-radio
        >
      </el-radio-group>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="sendOrder">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>
<script>
import request from '@/utils/request'
import { mapActions } from 'vuex'
export default {
  data() {
    return {
      activeName: 'first',
      tableData: [],
      params: {
        page: 1,
        pageSize: 10,
      },
      dialogVisible: false,
      employees: [],
      totalId: {},
      total: null,
      index: 0
    }
  },
  methods: {
    ...mapActions('employees', ['cascadeEmployeesFindAll']),
    async orderPageQuery() {
      let res = await request.get('/order/pageQuery', {
        params: this.params
      })
      this.tableData = res.data
      function add0(m) { return m < 10 ? '0' + m : m }
      for (let i = 0; i < this.tableData.list.length; i++) {
        let Time = this.tableData.list[i].orderTime
        function format(time) {
          var time = new Date(time);
          var y = time.getFullYear();
          var m = time.getMonth() + 1;
          var d = time.getDate();
          var h = time.getHours();
          var mm = time.getMinutes();
          var s = time.getSeconds();
          return y + '-' + add0(m) + '-' + add0(d) + ' ' + add0(h) + ':' + add0(mm) + ':' + add0(s);
        }
        this.tableData.list[i].orderTime = format(Time)
      }
    },
    //页面改变
    pageChangeHandler(page) {
      this.params.page = page
      this.orderPageQuery()
    },
    //分页数量改变
    sizeChangeHandler(pageSize) {
      this.params.pageSize = pageSize
      this.orderPageQuery()
    },
    sendOrder() {
      request.get('/order/sendOrder', {
        params: this.totalId
      }).then(res => {
        this.orderPageQuery()
        this.dialogVisible = false,
          this.$message.success(res.message);

      })
    },
    sendData(id) {
      this.dialogVisible = true,
        this.totalId.orderId = id
    },
    sendData2(id) {
      this.totalId.waiterId = id
    },
    cancelOrder(id) {
      let orderId=id
      request.get('/order/cancelSendOrder', { params: { orderId} }).then(res => {
        this.orderPageQuery()
        this.$message.success(res.message)
      })
    },
    juspDetails(id) {
      this.$router.push({
        name: 'OrderDetails',
        params: {
          id: id
        }
      })
    },
    handleClick(tab, event) {
      this.index = tab.index
      if (this.index == 0) {
        this.params = this.params
      } if (this.index == 1) {
        this.params.status = '待支付'
        this.orderPageQuery()
      } if (this.index == 2) {
        this.params.status = '待派单'
        this.orderPageQuery()
      } if (this.index == 3) {
        this.params.status = '待接单'
        this.orderPageQuery()
      } if (this.index == 4) {
        this.params.status = '待服务'
        this.orderPageQuery()
      } if (this.index == 5) {
        this.params.status = '待确认'
        this.orderPageQuery()
      } if (this.index == 6) {
        this.params.status = '已完成'
        this.orderPageQuery()
      }
    }
  },
  created() {
    this.orderPageQuery()
    this.cascadeEmployeesFindAll().then(res => {
      this.employees = res.data.list
      this.total = res.data.total
    })
  }
}
</script>

<style>
</style>